<template>
  <div id="app">
    <HelloWorld/>
    <div class="app-img">
      <div class="app-div">
        <img src="https://img.phb123.com/uploads/allimg/220908/812-220ZQ129170-L.jpg" alt="" class="app-img2">
        <span class="app-xl">心灵契约</span>
        <span class="app-xl1">·PC端</span>
      </div>
      <div class="app-img1">
      </div>
      <div class="app-right">
        <span class="app-right-s">心灵契约PC端</span>
        <p class="app-right-p">
          欢迎来到心灵契约交友网站
        </p>
        <div style="margin-top: 50px;margin-left: 30px">
          <el-button @click="toggleVisibility" round
                     style="background-color: transparent;height: 80px;width: 350px;margin-left: 20px;">
                     <svg t="1712539754025" style="height: 40px;width: 40px;margin-left: -20px" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4869" width="200" height="200"><path d="M1003.402012 0h-982.904014C9.199102 0 0 9.199102 0 20.497998v798.62201c0 11.298897 9.199102 20.497998 20.497998 20.497998h982.904014c11.298897 0 20.497998-9.199102 20.497998-20.497998V20.497998c0-11.298897-9.199102-20.497998-20.497998-20.497998z" fill="#3F6AFF" p-id="4870"></path><path d="M61.394004 61.394004h901.012011v655.336003H61.394004z" fill="#333333" p-id="4871"></path><path d="M798.62201 942.008007H225.278c-11.298897 0-20.497998 9.199102-20.497998 20.497998v40.995997c0 11.298897 9.199102 20.497998 20.497998 20.497998h573.34401c11.298897 0 20.497998-9.199102 20.497998-20.497998v-40.995997c0-11.398887-9.199102-20.497998-20.497998-20.497998z" fill="#3F6AFF" p-id="4872"></path><path d="M880.514012 778.124011h40.995997v61.394005h-40.995997z" fill="#FFE900" p-id="4873"></path><path d="M409.560004 839.618006h204.780002v102.390001H409.560004z" fill="#3F6AFF" p-id="4874"></path><path d="M511.950005 307.170003m-81.892003 0a81.892003 81.892003 0 1 0 163.784006 0 81.892003 81.892003 0 1 0-163.784006 0Z" fill="#FFE900" p-id="4875"></path><path d="M511.950005 307.170003m-40.995997 0a40.995996 40.995996 0 1 0 81.991993 0 40.995996 40.995996 0 1 0-81.991993 0Z" fill="#3F6AFF" p-id="4876"></path><path d="M368.564007 450.556h286.672005v40.995997H368.564007z" fill="#FFE900" p-id="4877"></path></svg>
            <!-- <img src="../image/登录.png" alt="" style="height: 40px;width: 40px;margin-left: -20px"> -->
            <span style="font-size: 30px;margin-left: 20px; color: white;font-weight: bold;">Login</span>
          </el-button>
          <br><br>
          <el-button @click="zhuce" round
                     style="background-color: transparent;height: 80px;width: 350px;margin-left: 20px">
                     <svg t="1712539922638"  style="height: 40px;width: 40px;margin-left: -20px"  viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14666" width="200" height="200"><path d="M768 1024H243.712C153.6 1024 81.92 952.32 81.92 862.208V161.792C81.92 71.68 153.6 0 243.712 0H768c90.112 0 161.792 71.68 161.792 161.792v30.72c0 26.624-22.528 49.152-49.152 49.152-26.624 0-49.152-22.528-49.152-49.152v-30.72c0-34.816-28.672-63.488-63.488-63.488H243.712c-34.816 0-63.488 28.672-63.488 63.488v700.416c0 34.816 28.672 63.488 63.488 63.488H768c34.816 0 63.488-28.672 63.488-63.488V628.736c0-26.624 22.528-49.152 49.152-49.152 26.624 0 49.152 22.528 49.152 49.152v235.52C929.792 952.32 856.064 1024 768 1024z" fill="#4F51FD" p-id="14667"></path><path d="M563.2 722.944c-26.624 0-53.248-10.24-73.728-30.72L313.344 516.096c-18.432-18.432-18.432-49.152 0-69.632 18.432-18.432 49.152-18.432 69.632 0l176.128 176.128c2.048 2.048 6.144 2.048 10.24 0l307.2-307.2c18.432-18.432 49.152-18.432 69.632 0 18.432 18.432 18.432 49.152 0 69.632l-307.2 307.2c-22.528 20.48-49.152 30.72-75.776 30.72z" fill="#FF4E7D" p-id="14668"></path></svg>
            <!-- <img src="../image/注册.png" alt="" style="height: 40px;width: 40px;margin-left: -20px"> -->
            <span style="font-size: 30px;margin-left: 20px;color: white;font-weight: bold;">Enroll</span>
          </el-button>
        </div>
      </div>
      <div class="copyright-container">
        <a href="https://beian.miit.gov.cn" target="_blank">ICP备案号:</a>
        <a href="https://beian.miit.gov.cn" target="_blank">豫ICP备2024047773号-1</a>
        <p class="copyright">版权所有 &copy; 2024;王更元，范文杰，杜泽瑞</p>
      </div>
      <div class="yemian" v-show="isVisible">
        <span class="yemian-p">登录</span>
        <svg t="1712539980019" style="width: 50px;height: 50px" class="yemian-img" @click="guanbi"  viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15654" width="200" height="200"><path d="M511.26 144.04c-203.43 0-368.38 164.95-368.38 368.38S307.83 880.8 511.26 880.8s368.38-164.95 368.38-368.38c0.01-203.43-164.95-368.38-368.38-368.38z m153.99 463.83c16.21 16.29 16.21 42.57 0 58.69-8.1 8.1-18.67 12.2-29.31 12.2-10.64 0-21.2-4.01-29.3-12.2l-95.37-95.37-95.45 95.37c-8.11 8.1-18.66 12.2-29.3 12.2-10.65 0-21.2-4.01-29.31-12.2-16.21-16.29-16.21-42.57 0-58.69l95.37-95.29-95.37-95.45c-16.21-16.29-16.21-42.57 0-58.7 16.21-16.13 42.49-16.21 58.7 0l95.37 95.37 95.45-95.45c16.21-16.21 42.48-16.21 58.7 0 16.21 16.29 16.21 42.57 0 58.69l-95.45 95.37 95.27 95.46z m0 0" fill="#d81e06" p-id="15655"></path></svg>
        <!-- <img src="../image/叉掉.png" alt="" style="width: 50px;height: 50px" class="yemian-img" @click="guanbi"> -->
        <form ref="loginForm" :model="denglu">
          <div class="input">
            <input style="height: 50px;width: 400px;background-color: transparent;border: 0;border-bottom: #01090e 1px solid; /* 去除边框 */
  border-radius: 5px;" placeholder="请输入手机号" type="text" name="phone" v-model="denglu.phone" @input="handleInput"
                   @focus="handleFocus"
                   @blur="handleBlur">
            <br> <br>
            <input style="height: 50px;width: 300px;background-color: transparent;border: 0;border-bottom: #01090e 1px solid; /* 去除边框 */
  border-radius: 5px; " placeholder="请输入验证码" type="password" name="password" v-model="denglu.yzm"
                   @input="handleInput"
                   @focus="handleFocus"
                   @blur="handleBlur">
            <el-button @click="login" style="height: 55px;font-size: 18px;color: black" :loading="loading">获取验证码
            </el-button>
          </div>
          <br> <br>
          <div style="margin-left: 150px">
            <p style="font-size: 17px;color: rgb(26, 150, 255); cursor: pointer;" @click="tourist">游客登录</p>
            <el-button style="width:400px;color: #038df9;font-size: 30px" @click="dl">登录</el-button>
          </div>
        </form>
      </div>
      <!--      注册-->
      <div class="zhuce" v-show="visible">
        <span class="yemian-p">注册</span>
        <svg t="1712539980019" style="width: 50px;height: 50px" class="yemian-img" @click="guanbi" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15654" width="200" height="200"><path d="M511.26 144.04c-203.43 0-368.38 164.95-368.38 368.38S307.83 880.8 511.26 880.8s368.38-164.95 368.38-368.38c0.01-203.43-164.95-368.38-368.38-368.38z m153.99 463.83c16.21 16.29 16.21 42.57 0 58.69-8.1 8.1-18.67 12.2-29.31 12.2-10.64 0-21.2-4.01-29.3-12.2l-95.37-95.37-95.45 95.37c-8.11 8.1-18.66 12.2-29.3 12.2-10.65 0-21.2-4.01-29.31-12.2-16.21-16.29-16.21-42.57 0-58.69l95.37-95.29-95.37-95.45c-16.21-16.29-16.21-42.57 0-58.7 16.21-16.13 42.49-16.21 58.7 0l95.37 95.37 95.45-95.45c16.21-16.21 42.48-16.21 58.7 0 16.21 16.29 16.21 42.57 0 58.69l-95.45 95.37 95.27 95.46z m0 0" fill="#d81e06" p-id="15655"></path></svg>
        <!-- <img src="../image/叉掉.png" alt="" style="width: 50px;height: 50px" class="yemian-img" @click="guanbi"> -->
        <div class="zhuce-top" style="margin-top: 30px; display: flex; align-items: center;">
          <span style="font-size: 20px; margin-left: 150px">头像</span>
          <label for="fileImage">
            <img id="img1"
                 src="https://ts1.cn.mm.bing.net/th/id/R-C.5c80aa95fbd3954894716d1ec12f004c?rik=flmfJ2KO%2fcItUw&riu=http%3a%2f%2fpic.ntimg.cn%2ffile%2f20180425%2f25124298_172519481324_2.jpg&ehk=lCAbTESr6UfvpTHME8gHYXlarjxwHjs8Ny4ODFRWuT4%3d&risl=&pid=ImgRaw&r=0"
                 alt="" width="70px" height="70px" style="margin-left: 140px; border-radius: 50%;">
          </label>
          <input type="file" id="fileImage" v-show="false" name="fileImage" @change="showImg"/>
        </div>
        <br>
        <div class="input">
          <input style="height: 50px;width: 400px;background-color: transparent;border: 0;border-bottom: #01090e 1px solid; /* 去除边框 */
  border-radius: 5px;" placeholder="用户名" type="text" name="phone" v-model="username" @input="handleInput"
                 @focus="handleFocus"
                 @blur="handleBlur">
        </div>
        <br>
        <div class="input">
          <input style="height: 50px;width: 400px;background-color: transparent;border: 0;border-bottom: #01090e 1px solid; /* 去除边框 */
  border-radius: 5px;" placeholder="身份证号" type="text" name="phone" v-model="provincial" @input="handleInput"
                 @focus="handleFocus"
                 @blur="handleBlur">
        </div>
        <br>
        <div style="font-size: 20px;margin-left: 150px">
          <span style="font-size: 20px;">性别</span>
          <el-radio style="margin-left: 150px;color: white;" v-model="sex" label="1">男</el-radio>
          <el-radio v-model="sex" label="2" style="color: white">女</el-radio>
        </div>
        <br>
        <div class="input">
          <input style="height: 50px;width: 400px;background-color: transparent;border: 0;border-bottom: #01090e 1px solid;
  " placeholder="请输入手机号" type="text" name="phone" v-model="phonee" @input="handleInput"
                 @focus="handleFocus"
                 @blur="handleBlur">
        </div>
        <br>
        <div class="block" style="font-size: 20px;margin-left: 150px">
          <span class="demonstration">地址</span>
          <el-cascader
            style="margin-left: 130px"
            size="large"
            :options="options"
            v-model="selectedOptions"
            @change="handleChange">
          </el-cascader>
        </div>
        <br> <br> <br>
        <div style="margin-left: 150px">
          <el-button style="width:400px;color: #038df9;font-size: 30px" @click="post">注册</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import qs from 'qs'
import axios from 'axios'
import { provinceAndCityData } from 'element-china-area-data'
import Cookies from 'js-cookie'
// import { Base64 } from 'js-base64'
export default {
  name: 'App',
  data () {
    return {
      loginUser: {},
      isVisible: false,
      top: '',
      provincial: '',
      yzm: '',
      denglu: {},
      sex: '1',
      phonee: '',
      bithday: '',
      username: '',
      visible: false,
      imageUrl: '',
      loading: false,
      options: provinceAndCityData,
      selectedOptions: [],
      selectedOptionAddress: undefined,
      age: null,
      imgType: ''
    }
  },
  methods: {
    toggleVisibility () {
      this.isVisible = !this.isVisible// 点击时切换isVisible的值
      this.visible = false
    },
    guanbi () {
      this.isVisible = false
      this.visible = false
    },
    zhuce () {
      this.visible = !this.visible
      this.isVisible = false
    },
    login () {
      const phonePattern = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
      if (phonePattern.test(this.denglu.phone)) {
        this.loading = true
        axios.defaults.withCredentials = true

        axios({
          url: 'http://152.136.143.223:9091/api/send/' + this.denglu.phone,
          method: 'post'
        })
          .then(res => {
            this.yzm = res.data.toString()
            if (this.yzm === '404') {
              this.$notify.error('手机号未注册')
              this.loading = false
            } else {
              this.$notify.success('验证码已发送至您手机')
              setInterval(() => {
                this.loading = false
              }, 3000)
            }
          })
      } else {
        this.$notify.error('手机号不合格')
      }
    },
    dl () {
      const phonePattern = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
      if (phonePattern.test(this.denglu.phone)) {
        if (this.denglu.yzm === this.yzm) {
          axios.defaults.withCredentials = true

          axios({
            url: 'http://152.136.143.223:9091/login/session/' + this.denglu.phone,
            method: 'post'
          }).then((res) => {
            console.log(res.data)
            sessionStorage.setItem('user', JSON.stringify(res.data))
            this.loginUser = res.data
            Cookies.set('use', JSON.stringify(this.loginUser))
            this.imgType = this.loginUser.uphoto.substring(this.loginUser.uphoto.lastIndexOf('.') + 1)
            Cookies.set('imgType', this.imgType)
            this.$notify.success('登录成功')
            this.$router.push({ path: '/home' })
          })
        } else {
          this.$notify.error('验证码无效')
        }
      } else {
        this.$notify.error('请输入手机号')
      }
    },
    tourist () {
      const data = {
        uid: 0,
        uhobby: '',
        uname: '游客',
        uphone: null,
        ustatusID: 0
      }
      sessionStorage.setItem('user', JSON.stringify(data))
      this.loginUser = data
      Cookies.set('use', JSON.stringify(this.loginUser))
      this.$notify.success('登录成功')
      this.$router.push({ path: '/home' })
    },
    showImg: function (e) {
      const that = this
      const file = document.getElementById('fileImage').files[0]
      this.imgType = file.name.substring(file.name.lastIndexOf('.') + 1)
      // console.log(file)
      if (window.FileReader) {
        const reader = new FileReader()
        reader.readAsDataURL(file)
        // 监听文件读取结束后事件
        reader.onloadend = function (e) {
          // e.target.result就是最后的路径地址
          document.getElementById('img1').setAttribute('src', e.target.result)
          console.log('***' + e.target.result)
          that.imageUrl = e.target.result
        }
      }
    },
    handleChange () {
      console.log(provinceAndCityData)
      for (let i = 0; i < provinceAndCityData.length; i++) {
        const children = provinceAndCityData[i].children
        const value = provinceAndCityData[i].value
        for (let j = 0; j < children.length; j++) {
          if (children[j].value === this.selectedOptions[1] && value === this.selectedOptions[0]) {
            this.selectedOptionAddress = provinceAndCityData[i].label + children[j].label
            // this.selectedOptionAddress.push(children[j].label)
            console.log('省份：', provinceAndCityData[i].label)
            console.log('市区：', children[j].label)
          }
        }
      }
      console.log(this.selectedOptionAddress)
    },
    post () {
      if (this.username === '') {
        this.$notify.error('请输入您的名字')
        return false
      }
      // 手机号校验
      const phonePattern = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
      if (!phonePattern.test(this.phonee) || this.phonee === '') {
        this.$notify.error('手机号不合格')
        return false
      }
      // 身份证号校验
      const sfz = /^[1-9]\d{5}(19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
      if (!sfz.test(this.provincial) || this.provincial === '') {
        this.$notify.error('身份证不合格')
        return false
      }
      if (this.selectedOptions.length <= 0) {
        this.$notify.error('请选择地址')
        return false
      }
      // this.imageUrl = window.btoa(this.imageUrl)
      this.imageUrl = this.imageUrl.replace(/^data:image\/\w+;base64,/, '')
      this.$router.push({
        name: 'he',
        params: {
          uName: this.username,
          uIdentity: this.provincial,
          uAge: this.age,
          uSex: this.sex,
          uPhone: this.phonee,
          uAddress: this.selectedOptionAddress,
          uphoto: this.imageUrl,
          imgType: this.imgType
        }
      })
      this.visible = false
      this.isVisible = false
      this.username = null
      this.provincial = null
      this.phonee = null
      this.selectedOptions = ''
    },
    handleFocus (event) {
      // 当输入框获得焦点时，设置背景为透明
      event.target.style.backgroundColor = 'transparent'
    },
    handleBlur (event) {
      // 当输入框失去焦点时，设置背景为透明
      event.target.style.backgroundColor = 'transparent'
    },
    handleInput (event) {
      event.target.style.fontSize = '20px'
      // 当用户输入内容时，保持背景透明
      event.target.style.backgroundColor = 'transparent'
      if (this.provincial.length === 18) {
        const birthYear = parseInt(this.provincial.substr(6, 4), 10)
        const birthMonth = parseInt(this.provincial.substr(10, 2), 10)
        const birthDay = parseInt(this.provincial.substr(12, 2), 10)
        const now = new Date()
        const currentYear = now.getFullYear()
        const currentMonth = now.getMonth() + 1
        const currentDay = now.getDate()
        let age = currentYear - birthYear
        if (currentMonth < birthMonth || (currentMonth === birthMonth && currentDay < birthDay)) {
          age--
        }
        this.age = age
      } else {
        this.age = null
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.app-img {
  height: 100vh;
  width: 100vw;
  background-image: url('https://pc.52tt.com/media/1264/bg.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center; /* 或者你想要的任何位置 */
  overflow: hidden; /* 确保内容不会溢出 */
  position: fixed; /* 将#app定位为固定位置 */
  top: 0;
  left: 0;

  .app-img2 {
    width: 49px;
    height: 49px;
    margin-left: 100px;
    margin-top: 22px;
  }
}

.app-div {
  display: flex;
  align-items: center;

  .app-xl {
    font-size: 35px;
    color: #ffffff;
    margin-top: 20px;
    margin-left: 5px;
    font-weight: bold; /* 或者使用 700 作为数值 */
  }

  .app-xl1 {
    font-size: 35px;
    color: #ffffff;
    margin-top: 20px;
    margin-left: 5px;
  }
}

.app-img1 {
  background-image: url('https://pc.52tt.com/media/1263/pc1.png');
  position: absolute;
  top: 50%;
  left: 29.5%;
  transform: translate(-50%, -50%);
  width: 620px;
  height: 660px;
  background-repeat: no-repeat;
  background-size: 560px 660px;
  background-position: center;
}

.app-right {
  height: 500px;
  width: 500px;
  //background-color: white;
  margin-left: 300px;
  position: absolute; /* 使用绝对定位 */
  top: 50%; /* 顶部对齐到父元素的50% */
  left: 50%; /* 左侧对齐到父元素的50% */
  transform: translate(-50%, -50%); /* 通过transform调整文本的实际位置 */
  display: flex; /* 使用flex布局 */
  flex-direction: column; /* 子元素垂直排列 */
  align-items: flex-start; /* 子元素在交叉轴的开始位置对齐 */
  .app-right-s {
    font-size: 50px;
    color: white;
    margin-left: 90px;
  }

  .app-right-p {
    font-size: 35px;
    color: rgba(98, 98, 120, 0.79);
    margin-top: 5px;
  }
}

.copyright-container {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  padding: 10px;
  box-sizing: border-box;
}

/* 版权信息文本 */
.copyright {
  font-size: 10px;
  margin: 0;
  color: #ffffff;
}

.yemian {
  height: 500px;
  margin-left: 400px;
  width: 700px; /* 或其他具体宽度 */
  background-color: #61869d;
  z-index: 100;
  position: absolute;
  background-color: rgba(121, 121, 223, 0.5);
  backdrop-filter: blur(4px);

  .yemian-p {
    //font-family: "汉仪青云简", "Arial", sans-serif;
    font-family: Arial, cursive;
    font-size: 50px;
    color: white;
    margin-left: 300px;
  }

  .input {
    margin-left: 150px;
    margin-top: 100px;

    input[type="password"]::placeholder {
      font-size: 20px; /* 设置placeholder文本的大小 */
      color: #010101; /* 设置placeholder文本的颜色 */
    }

    input[type="text"]::placeholder {
      font-size: 20px; /* 设置placeholder文本的大小 */
      color: #000000;
    }
  }

  .yemian-img {
    margin-left: 250px;
    cursor: pointer;
  }
}

.zhuce {
  height: 650px;
  margin-left: 400px;
  width: 700px; /* 或其他具体宽度 */
  background-color: #61869d;
  z-index: 100;
  position: absolute;
  background-color: rgba(121, 121, 223, 0.5);
  backdrop-filter: blur(4px);
  margin-top: -50px;

  .yemian-p {
    //font-family: "汉仪青云简", "Arial", sans-serif;
    font-family: Arial, cursive;
    font-size: 50px;
    color: white;
    margin-left: 300px;
  }

  .input {
    margin-left: 150px;

    input[type="password"]::placeholder {
      font-size: 20px; /* 设置placeholder文本的大小 */
      color: #011c35; /* 设置placeholder文本的颜色 */
    }

    input[type="text"]::placeholder {
      font-size: 20px; /* 设置placeholder文本的大小 */
      color: #011c35;
    }
  }

  .yemian-img {
    margin-left: 250px;
    cursor: pointer;
  }
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 50px;
  color: #8c939d;
  width: 100px;
  height: 50px;
  border-radius: 50%;
}

.avatar-uploader {
  margin-left: 350px;
  margin-top: -40px;
}

</style>
